var app = app || {};
(function(){
	var Utils=app.Utils;
	
	//todoItem
	var TodoItem=React.createClass({
	    getInitialState:function(){
	        return{mouseOver:false}
	    },
	    mouseMoveHandle:function(e){
	        if(e.type=='mouseenter')
	            this.setState({mouseOver:true});
	        else
	            this.setState({mouseOver:false});
	    },
	    render:function(){
	        var item=this.props.data;
	        var classes=Utils.classNames({
	            "item":true,
	            "mouseOver":this.state.mouseOver
	        });
	        return (
	            <div className={classes} onMouseEnter={this.mouseMoveHandle} onMouseLeave={this.mouseMoveHandle}>
	                <div className="icon">
	                    <i className="flag icon"></i>
	                </div>
	                <div className="content">
	                <p><span className="ui horizontal label">标签1</span>{item.content}</p>
	                    <div className="extra">
	                        <span>2015-10-07 14:05</span>
	                        <button className="ui mini compact basic right floated icon button">
	                            <i className="remove icon"></i>
	                        </button>
	                        <button className="ui mini compact basic right floated icon button">
	                            <i className="checkmark icon"></i>
	                        </button>
	                    </div>
	                </div>
	            </div>
	        );
	    }
	});
	
	//todoList
	app.TodoList=React.createClass({
	    render:function(){
	        var items=this.props.items;
	        return (
	            <div className="ui segment tall stacked">
	                <div className="ui action fluid input">
	                <input type="text" placeholder="..."/>
	                    <button className="ui right icon button"><i className="icon checkmark"></i></button>
	                </div>
	                <div className="ui divider"></div>
	                <div className="ui divided items">
	                {
	                    items.map(function(item){
	                        return <TodoItem key={item.id} data={item}/>;
	                    })
	                }
	                </div>
	            </div>
	        );
	    }
	});
})();
